<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .el-header, .el-footer {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            /*line-height: 200px;*/
        }


    </style>

</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">
                    <a  @click="principal()"><el-avatar :size="size" :src="circleUrl"></el-avatar></a>
                    <span>{{staffInfo}}</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1" @click="goods()">我的订单</el-menu-item>
                    <el-menu-item index="2-2" @click="favorite()">我的收藏</el-menu-item>
                </el-submenu>
                <el-menu-item index="4"><a href="/html/front/t-login.html" target="_blank">退出登录</a></el-menu-item>
                <el-menu-item index="4"><a href="/html/lvyoule_11_10/indexshiyan.html" target="_blank">返回首页</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main :visible.sync="dialogFormVisible">
            <iframe
                    :src="address"
                    width="100%"
                    height="756px"
                    frameborder="0"
                    scrolling="auto"
            ></iframe>
        </el-main>
    </el-container>


    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-input v-model="form.birthday" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="qq" :label-width="formLabelWidth">
                <el-input v-model="form.qq" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证件号" :label-width="formLabelWidth">
                <el-input v-model="form.zjno" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                circleUrl: "https://ljblist.oss-cn-hangzhou.aliyuncs.com/c1760712-53ee-4da6-8716-c35046d1fcd7.jpg",
                sizeList: ["large"],
                tableData: {},
                form: {},
                title:"修改资料",
                dialogFormVisible:false,
                address:"InformationDisplay.html",
                staffInfo: '' //登录人信息对象
            };
        },
        created: function () {//页面初始化时,需要执行的业务可以放入该方法
            this.loadData();
            //定义变量_this=this
            var _this = this;
            //页面初始化时，需要执行的业务可以放入该方法
            //获取用户登录后的信息
            axios.get('/tuser/getLoginSession')
                .then(function (response) {
                    if (response.data.code == 200) {
                        _this.staffInfo = response.data.data;
                    }
                });
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            loadData() {
                let _this = this;
                //使用axios向后台发请求
                axios.get('/tuser/tick')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.tableData=response.data.data
                            // alert(JSON.stringify(_this.tableData))
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                this.form = this.tableData;
            },
            //个人中心
            addUser(){
                let _this = this;
                axios.put("/tuser/update",
                    this.form)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            _this.dialogFormVisible = false;
                            _this.loadData();
                        }
                    })
                    .catch(function (error) {
                        _this.$message.error('错误');
                    });
            },
            principal(){
                this.address="InformationDisplay.html";
            },
            goods(){
                this.address="MyOrder.html?scid="+this.tableData.id;
            },
            favorite(){
                this.address="favorite.html?favrid="+this.tableData.name;
            },
        }
    })
</script>
</html>